//  添加岗位能力页面   *********************** *********************** *********************** ***********************
import React, { useEffect } from "react"
import { Button, Form, Select, Input, Slider } from 'antd'
import { SendOutlined, SaveOutlined } from '@ant-design/icons';
import SkillDescriptionV2 from "@/components/skillDescriptionV2";
import styles from './addPostSkill.less'
import { NavLink } from "react-router-dom";
import { observer } from 'mobx-react-lite'
import useStore from "@/context/useStore";
import { IRouteComponentProps } from 'umi'
import { ISkillAddItem } from "@/utils";

import './addPostSkill.less'

const AddPostSkill: React.FC<IRouteComponentProps> = ({ history, location, match }) => {

    let stationVersionId = location.query.stationVersionId;
    console.log(location.query.stationVersionId);
    // 获取仓库的skill模块
    let { skill } = useStore()
    //创建表单实例
    const [form] = Form.useForm()
    // 数值 
    const marks = {
        10: "5k",
        16: "8k",
        40: "20k",
        60: "30k",
        80: "40k",
        100: {
            style: {
                color: "#c671b31"
            }
        }

    }

    useEffect(() => {
        if (stationVersionId) {
            skill.getSkillDetail(stationVersionId as string);
        }
    }, [stationVersionId])

    useEffect(() => {
        form.setFieldsValue({
            ...skill.skillAddItem, ...skill.skillAddItem.stationLevelList[0]
        })
    }, [skill.skillAddItem]);

    async function addPostSkill(res: ISkillAddItem) {
        console.log(res, "res1");
        let stationVersionId = await skill.addPostSkill(res);
        history.replace(`/teachers/addPostSkill?stationVersionId=${stationVersionId}&see=false`)
    }

    return <div className={styles.addPostSkill}>
        <div className={styles.nav}>
            <b> 添加岗位能力</b>
            <div>
                <NavLink to='/teachers/postSkill'> <Button>返回</Button></NavLink>

                <Button type="primary" icon={<SendOutlined />}>提交审核</Button>
            </div>
        </div>
        <div className={styles.main}>
            <div>
                <b>基本信息</b>
            </div>
            <Form
                form={form}
                key={JSON.stringify(skill.skillAddItem)}
                initialValues={{ ...skill.skillAddItem, ...skill.skillAddItem.stationLevelList[0] }}
                onFinish={addPostSkill}>
                <Button type="text" icon={<SaveOutlined />} htmlType="submit">保存</Button>
                <div className='tit'>
                    <Form.Item label="岗位名称" name="name" rules={[{ required: true, message: "请输入岗位名称" }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item label="专业" name="majorId" rules={[{ required: true, message: "请选择专业" }]} style={{ width: '200px' }}>
                        <Select>{
                            skill.skillLabel.map(item => {
                                return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                            })
                        }</Select>
                    </Form.Item>
                    <Form.Item label="版本号 V" name="stationVersion" rules={[{ required: true, message: "请输入版本号" }]}>
                        <Input type="number" value='1' />
                    </Form.Item>
                    <Form.Item label="作者" name="userName" >
                        <span>郭老师</span>
                    </Form.Item>
                </div>
                <div className='ta'>
                    <div>
                        <Form.Item label="薪酬范围" name="salaryList" rules={[{ required: true, message: "请输入薪酬范围" }]}>
                            <Slider marks={marks} range defaultValue={[10, 30]} />
                        </Form.Item>
                    </div>
                    <div>
                        <Form.Item label="岗位描述" name="describes" rules={[{ required: true, message: "请输入岗位描述" }]}>
                            <Input type="textarea" placeholder="请输入岗位描述"></Input>
                        </Form.Item> 
                    </div>
                    <div>
                        <Form.Item label="岗位任务" name="stationTask" >
                            <Input type="textarea" placeholder="请输入岗位任务"></Input>
                        </Form.Item>
                    </div>
                </div>
            </Form>
        </div>
        <section>
            {stationVersionId ? <SkillDescriptionV2 stationVersionId={stationVersionId as string} /> : null}
        </section>
    </div>
}
export default observer(AddPostSkill);

//  添加岗位能力页面   *********************** *********************** *********************** ***********************
